<template>
  <div :style="tableStyle">
    <el-table
      :data="bodyDataData"
      :row-class-name="tableRowClassName"
      class="customer-table"
      size="small"
      style="width: 100%; background: transparent; text-algin: center"
      :header-cell-style="{
        background: 'rgba(0, 86, 251, .2)',
        fontSize: getRealPX(12)+'px',
      }"
      :max-height="tableheightAutoSize || getRealPX(tableheight)"
    >
      <el-table-column
        v-for="(item, index) in headerData"
        :key="index"
        :label="item.title"
        :width="item.width"
        align="center"
      >
        <template slot-scope="scope">
          <div @click="clickItem(scope.row)" v-if="'vcCompanyName' == item.props">
            {{ scope.row[item.props] }}
          </div>
          <div v-else>
            {{ scope.row[item.props] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: "data",
      bodyDataData: [],
    };
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "data-row";
      } else {
        return "dataone-row";
      }
    },
  },
  watch: {
    bodyData: {
      immediate: true,
      deep: true,
      handler() {
        // if (this.clearData) {
          this.bodyDataData = this.bodyData;
        // } else {
        //   let length = this.bodyData.length;
        //   for (let i = 0; i < length; i++) {
        //     let item = this.bodyData[i];
        //     item.index_index = i + 1;
        //     this.bodyDataData.push(item);
        //   }
        // }
      },
    },
  },
  props: {
    // 样式
    tableStyle: {
      type: Object,
      default() {},
    },
    // 传入的最大高度，这个高度组件内自己计算兼容性
    tableheight: {
      type: Number,
    },
    tableheightAutoSize:{
      type:Number
    },
    // 行头
    headerData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 每一行的数据
    bodyData: {
      type: Array,
      default() {
        return [];
      },
    },
    // 可点击的列的行头字段
    clickableItemField: "",
    // 可点击列的点击事件
    clickItem: {
      type: Function,
    },
    clearData: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="stylus" scoped>
/deep/.el-table th {
  color: #ffffff; /* 字体颜色 */
  font-size: 16px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/deep/.el-table tr, .el-table td {
  color: #e5dada;
  font-size: 12px;
  background-color: transparent; /* 背景透明 */
  // border: 0;
  // height: 30px;
  // line-height: 30px;
}

/, /deep/.el-table tr.data-row {
  background: rgba(0, 204, 255, 0.2);
}

/deep/.el-table tr.dataone-row {
  // background: block;
}

/deep/.el-table td, .el-table th.is-leaf, .el-table--border, .el-table--group {
  color: rgba(0, 204, 255, 1);
  font-size: 12px;
  font-weight: 400;
}

// 去掉表格单元格边框
/deep/.customer-table th {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

/deep/.customer-table td, .customer-table th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-top: 0;
}

// 表格最外边框
/deep/.el-table--border, .el-table--group {
  border: 1px solid rgba(0, 86, 251, 0.2);
}

// 头部边框
/deep/.customer-table thead tr th.is-leaf {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-right: none;
}

/deep/.customer-table thead tr th:nth-last-of-type(2) {
  border-right: 1px solid rgba(0, 86, 251, 0.2);
}

// 表格最外层边框-底部边框
/deep/.el-table--border::after, .el-table--group::after {
  width: 0;
}

/deep/.customer-table::before {
  width: 0;
}

/deep/.customer-table .el-table__fixed-right::before, .el-table__fixed::before {
  width: 0;
}

// 表格有滚动时表格头边框
/deep/.el-table--border th.gutter:last-of-type {
  border: 1px solid rgba(0, 86, 251, 0.2);
  border-left: none;
}
</style>
